<style lang='less'>
</style>
<template>
  <div class="search-list-vue frame-page h-panel">
    <div class="h-panel-bar">
      <span class="h-panel-title">查询列表</span>
      <div class="h-panel-right"><Search placeholder="查询" v-width="400" v-model="params.keyword" @search="getData(true)" showSearchButton></Search></div>
    </div>
    <div class="h-panel-body">
      <div>
        <p>
          <Button color="blue" icon="h-icon-plus" @click="add">新增</Button>  <Button @click="expandAll">{{isExpand?'收起':'展开'}}</Button>        
        </p>
        <Table ref="table" :datas="datas" :height="800" @sort="triggerSort" :loading="loading">
<TableItem title="名称" prop="title" :width="140" treeOpener></TableItem>
<TableItem title="图标" :width="50">
  <template slot-scope="{data}">
    <i :class="data.icon"></i>
  </template>
</TableItem>
<TableItem title="Key" prop="key" :width="150"></TableItem>
<TableItem title="排序" prop="order" :width="50"></TableItem>
<TableItem title="权限" :width="350">
  <template slot-scope="{data}">
    <template v-if="!data.children">
      <Button v-for="item in data.permissions" size="s" :key="item.id" @click="addPermission(data.key,item)">{{item.name}}</Button>
      <Button size="s" @click="addPermission(data.key)"><i class="icon-plus"></i></Button>
    </template>
  </template>    
</TableItem>
<TableItem title="菜单" :width="50">
              <template slot-scope="{data}">
                <h-switch v-model="data.show" :small="true" @input="toggleStatus(data,'show')">
                  <span slot="open" class="h-icon-check"></span>
                  <span slot="close" class="h-icon-close"></span>
                </h-switch>
              </template>
            </TableItem>
          <TableItem title="操作" align="center" :width="100">
            <template slot-scope="{data}">
              <button class="h-btn h-btn-s h-btn-blue" @click="edit(data)"><i class="h-icon-edit"></i></button>
              <Poptip content="确认删除?" @confirm="remove(datas, data)"><button class="h-btn h-btn-s h-btn-red"><i class="h-icon-trash"></i></button>
              </Poptip>
            </template>
          </TableItem>
          <div slot="empty">暂无数据</div>
        </Table>
        <Pagination v-if="pagination.total>0" align="right" v-model="pagination" @change="changePage"/>
      </div>
    </div>
  </div>
</template>
<script>
import Form from './form';
import permissionForm from './../adminPermissions/form';
import _ from 'lodash';

export default {
  data() {
    return {
      datas: [{}, {}, {}],
      loading: true,
      isExpand: false,
      pagination: {
        page: 1,
        size: 20,
        total: 0
      },
      params: {
        keyword: null,
        sortProp: null,
        sortType: null
      }
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    params() {
      this.getData(true);
    }
  },
  methods: {
    changePage(page) {
      console.log(page);
      this.page = page.cur;
      this.size = page.size;
      this.getData();
    },
    triggerSort(data) {
      this.params.sortProp = data.prop;
      this.params.sortType = data.type.toUpperCase();
      this.getData(true);
    },
    init() {      
      this.getData();
    },
    toggleStatus(data,key='status'){
      let param = {id:data.id};
      param[key] = data[key]?1:0;
      R.adminMenu.store(param).then(resp => {
          if(resp.code==200){
            G.trigger('SYS_MENU_REFRESH');
            this.$Message.success(resp.message);
          }else{
            this.getData();
            this.$Message.warn(resp.message);
          }          
      });      
    },
    addPermission(key,item={}){
      let params = Object.assign({parent_id:key},item);
      if(params.http_path){
        params.http_path = params.http_path.split(',');
      }      
      this.$Modal({
        title:'编辑权限',
        hasCloseIcon:true,
        hasDivider:true,
        width:800,
        component: {
          vue: permissionForm,
          datas: { params: params } // 子组件直接使用 props 即可使用，兼容性 1.15.0+
        },
        events: {
          success: (modal) => {
            this.getData();
            G.trigger('SYS_MENU_REFRESH');
          }
        }
      });
    },
    openModal(item={},title='新增'){
      this.$Modal({
        title:title,
        hasCloseIcon:true,
        hasDivider:true,
        width:800,
        component: {
          vue: Form,
          datas: { params: item } // 子组件直接使用 props 即可使用，兼容性 1.15.0+
        },
        events: {
          success: (modal) => {
            this.getData();
            G.trigger('SYS_MENU_REFRESH');
          }
        }
      });
    },
    edit(data){
      let item = Object.assign({},data);
      if(item.hasOwnProperty('tags')){
        if(!item.tags){
          item.tags = [];
        }else{
          item.tags = item.tags.split(',').filter(item=>{return item!='';});
        }        
      }
      this.openModal(item,'编辑');
    },
    add(){
      this.openModal(JSON.parse('{"parent_id":0,"order":"","title":"","icon":"","uri":"","key":"","show":false}'));
    },
    remove(datas, data) {
      R.adminMenu.delete({id:data.id}).then((resp)=>{
        this.$Message.success('删除成功');
        this.getData();
        G.trigger('SYS_MENU_REFRESH');
      });      
    },
    expandAll() {
      if(!this.isExpand){
        this.isExpand = true;
        this.$refs.table.expandAll();
      }else{
        this.isExpand = false;
        this.$refs.table.foldAll();
      }      
    },
    getData(reload = false) {
      if (reload) {
        this.pagination.page = 1;
      }
      this.loading = true;    
      let size = this.pagination.size;
      let page = this.pagination.page; 
      let param = Object.assign({size,page},this.params); 
      R.adminMenu.index(param).then(resp => {
        this.loading = false;
        this.datas = resp.data.list;
        this.pagination = resp.data.pagination;    
        this.$nextTick(()=>{
          if(this.isExpand){
            this.$refs.table.expandAll();
          }          
        });    
      });      
    }
  },
  computed: {
    
  }
};
</script>
